import { Card } from 'antd'
import './index.scss'

const MainChart = ({ title, data }) => {
  // 模拟折线图数据
  const maxValue = Math.max(...data)
  const minValue = Math.min(...data)
  const range = maxValue - minValue

  return (
    <Card title={title} className="main-chart-card" extra={<a href="#more">查看更多</a>}>
      <div className="chart-wrapper">
        <div className="chart-area">
          <svg width="100%" height="300" className="line-chart">
            {/* 网格线 */}
            <line x1="0" y1="60" x2="100%" y2="60" stroke="#f0f0f0" strokeWidth="1" />
            <line x1="0" y1="120" x2="100%" y2="120" stroke="#f0f0f0" strokeWidth="1" />
            <line x1="0" y1="180" x2="100%" y2="180" stroke="#f0f0f0" strokeWidth="1" />
            <line x1="0" y1="240" x2="100%" y2="240" stroke="#f0f0f0" strokeWidth="1" />

            {/* 折线路径 */}
            <defs>
              <linearGradient id="lineGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stopColor="rgba(24, 144, 255, 0.3)" />
                <stop offset="100%" stopColor="rgba(24, 144, 255, 0.05)" />
              </linearGradient>
            </defs>

            {/* 绘制折线和面积 */}
            {data.length > 0 && (
              <>
                <path
                  d={`M ${data.map((value, index) => {
                    const x = (index / (data.length - 1)) * 100
                    const y = 280 - ((value - minValue) / range) * 240
                    return `${x}%,${y}`
                  }).join(' L ')}`}
                  fill="none"
                  stroke="#1890ff"
                  strokeWidth="3"
                />
                <path
                  d={`M ${data.map((value, index) => {
                    const x = (index / (data.length - 1)) * 100
                    const y = 280 - ((value - minValue) / range) * 240
                    return `${x}%,${y}`
                  }).join(' L ')} L 100%,280 L 0,280 Z`}
                  fill="url(#lineGradient)"
                />
                
                {/* 数据点 */}
                {data.map((value, index) => {
                  const x = (index / (data.length - 1)) * 100
                  const y = 280 - ((value - minValue) / range) * 240
                  return (
                    <circle
                      key={index}
                      cx={`${x}%`}
                      cy={y}
                      r="5"
                      fill="#1890ff"
                      stroke="#fff"
                      strokeWidth="2"
                      className="data-point"
                    />
                  )
                })}
              </>
            )}
          </svg>
        </div>
        
        {/* X轴标签 */}
        <div className="chart-labels">
          {['2021-03-09', '2021-03-10', '2021-03-11', '2021-03-12', '2021-03-13', '2021-03-14', '2021-03-15', '2021-03-16'].map((label, index) => (
            <span key={index}>{label}</span>
          ))}
        </div>
      </div>
    </Card>
  )
}

export default MainChart
